<template>
  <div class="manage-box">
    <!-- 客户管理 -->
    <serchForm
      :Form="clientForm"
      :FormLabel="clientFormLabel"
      @onSearch="onSearch"
    />
    <div class="function-box">
      <el-button
        class="createBtn"
        @click="addCustomerFn"
      ><i
          class="iconfont icon-plus-square"
          v-if="checkPermi(['system:customer:edit'])"
        ></i>
        新增
      </el-button>
      <el-button
        class="reviseBtn"
        @click="updateCustomerFn"
      ><i
          class="iconfont icon-xiugai"
          v-if="checkPermi(['system:customer:edit'])"
        />
        修改
      </el-button>
      <el-button
        class="exportBtn"
        @click="deleteCustomerFn"
      ><i
          class="iconfont icon-shanchu"
          v-if="checkPermi(['system:customer:edit'])"
        ></i>
        删除
      </el-button>
      <el-button
        class="baifang"
        @click="visitCustomerFn"
      ><i
          class="iconfont icon-baifangguanli"
          v-if="checkPermi(['system:records:edit'])"
        ></i>
        拜访
      </el-button>
    </div>
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @optionTime="optionTime"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="clientTableHeaderData"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      :tableData="clientTableData"
      :operate="operate"
      @tableDetail="tableDetail"
    />
    <addManage
      v-if="flag"
      @closePopUps="closePopUps"
      :popTitle="popTitle"
      @getCustomerData="getCustomerData"
      :defindPopData="defindPopData"
      :deptOptions="deptOptions"
    />
    <visitCom
      v-if="visitFlag"
      @closeVisit="closeVisit"
      :visitAssignmentData="visitAssignmentData"
    />
  </div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import addManage from './components/addManage';
import { selectCustomerApi, deleteCustomer } from '@/api/customer'
import visitCom from './components/visitCom'
import { ref, onMounted } from 'vue';
import { deletePopHook } from '@/hook/setPop/deletePop.js'
import { deptTreeSelect } from "@/api/system/user";

let deletePop = deletePopHook()
const idActive = 'customerId'
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import { checkPermi } from "@/utils/permission.js";
let updatePop = updatePopHook()
const deptOptions = ref(undefined);

// 拜访信息
let visitAssignmentData = ref(null)
// 显示新增弹窗
let flag = ref(false)
// 显示操作栏
const operate = ref(false)
let popTitle = ref('新增')
// 拜访记录显示
let visitFlag = ref(false)
// 回显数据详情修改
let defindPopData = ref({})

// 表单绑定属性名
let clientForm = ref(
  {
    customerId: '',    // 客户编号
    customerName: '',    // 客户名称
    customerType: '',    // 客户类型
  }
)
// 表单数据标题
let clientFormLabel = ref([
  {
    name: 'customerId',
    label: '客户编号'
  },
  {
    name: 'customerName',
    label: '客户名称',
  },
  {
    name: 'customerType',
    label: '客户类型',
  },


])
// 查找
const onSearch = (v) => {
  // 每次查询后回到页1
  pageNum.value = 1
  getCustomerData(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
let multipleSelection = ref([])

// 表格表头数据
let clientTableHeaderData = ref([
  {
    prop: 'customerId',
    label: '客户编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'customerName',
    label: '客户名称',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'customerType',
    label: '客户类型',
    minwidth: 100
  },
  {
    prop: 'companyName',
    label: '服务公司',
    minwidth: 100
  },
  {
    prop: 'customerSource',
    label: '客户来源',
    minwidth: 100
  },
  {
    prop: 'customerContacts',
    label: '客户联系人',
    width: '140px',
    minwidth: 100
  },
  {
    prop: 'office',
    label: '职务',
    minwidth: 100
  },
  {
    prop: 'contactPhone',
    label: '联系电话',
    colorClassName: 'activeColor',
    width: '140px'
  },
  {
    prop: 'address',
    label: '联系地址',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'responsiblePerson',
    label: '负责人',
    colorClassName: 'activeColor',
  },
  {
    prop: 'responsiblePersonPhone',
    label: '负责人电话',
    colorClassName: 'activeColor',
    width: '140px'
  },
  {
    prop: 'deptId',
    label: '部门',
    colorClassName: 'activeColor'
  },
  {
    prop: 'remarks',
    label: '备注',
    colorClassName: 'activeColor'
  },
])
// 表格数据内容
let clientTableData = ref([])

// 删除客户
const deleteCustomerFn = () => {
  let fn = async () => {
    let params = {
      id: multipleSelection.value[0].customerId
    }
    let res = await deleteCustomer(params)
    let { code, msg } = res
    if (code == 200) {
      getCustomerData()
      proxy.$modal.msgSuccess(msg);
    }
  }
  deletePop(multipleSelection, fn)
}

// 选中的时间
const optionTime = (v) => {
  console.log(v);
}
// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
  console.log(v);
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  getCustomerData(clientForm.value)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v);
}
// 编辑
const handleEdit = (props) => {
  let { i, v } = props

}
// 删除
const handleDelete = (props) => {
  let { i, v } = props

}
// 打开新增弹窗
const addCustomerFn = () => {
  if (Object.keys(defindPopData.value).length != 0) {
    defindPopData.value = {}
  }
  flag.value = true
  popTitle.value = '新增'
}
// 修改
const updateCustomerFn = () => {
  updatePop(multipleSelection, flag, popTitle, '修改', false, defindPopData)
}
// 关闭弹窗
const closePopUps = () => {
  flag.value = false
}
// 详情双击行
const tableDetail = (props) => {
  // disabled.value = true
  flag.value = true
  popTitle.value = '详情'
  defindPopData.value = props
}
// 请求客户
const getCustomerData = async (data = '') => {
  let data1 = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data1, data)
  let res = await selectCustomerApi(params)
  let { code, total, rows } = res
  if (code == 200) {
    clientTableData.value = rows
    totals.value = total
  }
}
// 拜访记录
const visitCustomerFn = () => {
  console.log(multipleSelection.value[0]);
  if (multipleSelection.value.length == 1) {
    visitFlag.value = true
    visitAssignmentData.value = multipleSelection.value[0]
    visitFlag.value = true
  } else {
    proxy.$modal.msgWarning('勾选一个@^@');
  }
}

// 关闭拜访
const closeVisit = () => {
  visitFlag.value = false
}
/*查询部门下拉树结构 */
const getDeptTree = () => {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
  });
};
onMounted(() => {
  getCustomerData()
  getDeptTree()
})
</script>
<style scoped lang='scss'>
.manage-box {
  padding: 16px;

  .function-box {
    display: flex;
    align-items: center;
  }
}
</style>
